<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /* https://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ */
    @font-face {
      font-family: 'YourWebFontName';
      src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
      src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
      url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
    }

    @font-face {
      font-family: YH;

      /*
        src表示调用字体文件，
        可以是本地字体文件（IE9+支持）--- local，
        也可以是线上地址（可能有跨域限制）--- url。
      */
      src: local("Microsoft Yahei");
    }

    body {
      font-family: 'YourWebFontName';
      font-size: 16px;
      font-style: normal;
    }
  </style>
</head>
<body>

</body>
</html>
